import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { getArticleList,getArticleDetele } from "../../store/counterSlice";
import { Space,Table,Button,Modal  } from "antd";
import instance from "../../apis/request";
import { useNavigate } from 'react-router-dom';
import Articleapi from "../../computed/Articleapi";
import Search from "../../computed/Search";//头部筛选组件
function Article() {
    const {articleData,count} = useSelector(state => state.counter)
    const [isModalOpen, setIsModalOpen] = useState(false);
  const dispatch = useDispatch()
  const [data,setData]=useState({
    page:1,//页码  必传
pageSize:6,//每页显示条数 必传
keyword:null,//搜索标题
tag:null//搜索标签

  })
  const [fy,setFy]=useState({
    current:1,
    pageSize:6,
    total:0
  })

  const aa=async()=>{
    const res=await instance.get('/article/list',{
        params:data
    }).then(res=>{
        dispatch(getArticleList(res))
        setFy({
            ...fy,
            total:res.count
        })
    })
  }

  useEffect(()=>{
    aa()
  },[data,dispatch])
  const dd=(diss)=>{
    setData({
        page:diss.current,
        pageSize:diss.pageSize
    })
    setFy({
        ...fy,
        current:diss.current,
        pageSize:diss.pageSize,
        total:diss.count

    })
  }
  const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '呃呃',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '次次',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button type="primary" onClick={()=>xiang(record)}>详情</Button>
        <Button type="primary" onClick={()=>showModal(true,record)}>编辑</Button>
        <Button type="primary" danger onClick={()=>del(record)}>删除</Button>
      </Space>
    ),
  },
];

const del=(record)=>{
    if(confirm('确定删除吗？')){
        dispatch(getArticleDetele(record.id))
    }
}
const navigate=useNavigate('')
const xiang=(record)=>{
    console.log(record)
    navigate(`/detail/${record.id}`)
}

const [comment,setComment]=useState('')
const [isshow,setIsshow]=useState(false)

const showModal = (flag,record) => {
    setIsModalOpen(true);
    if(flag){
        setIsshow(true)
        setComment(record)
    }else{
        setIsshow(false)

    }
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onchangesou=(k)=>{
    setData({
        ...data,
        keyword:k.keyword
    })
}

    return (
        <div>
          <Search kkk={onchangesou} />
            <Button type="primary" onClick={()=>showModal()}>添加</Button>
            <Table dataSource={articleData} columns={columns} pagination={fy} onChange={dd} />
            <Modal
        title={isshow?'编辑':'添加'}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Articleapi comment={comment} isshow={isshow} setData={aa} handleCancel={handleCancel}/>
      </Modal>
        </div>
    );
}

export default Article;
